@import "../../themes/ionic.globals.md";

// Material Design Tabs
// --------------------------------------------------

/// @prop - Background color of the tabbar
$tabs-md-background:                   $toolbar-md-background !default;

/// @prop - Padding on the tab button
$tabs-md-tab-padding:                  8px 0 10px 0 !default;

/// @prop - Min height of the tab button
$tabs-md-tab-min-height:               5.6rem !default;

/// @prop - Font size of the inactive tab button text
$tabs-md-tab-font-size:                1.2rem !default;

/// @prop - Font weight of the tab button text
$tabs-md-tab-font-weight:              normal !default;

/// @prop - Opacity of the inactive tab button
$tabs-md-tab-opacity:                  .7 !default;

/// @prop - Text color of the inactive tab button
$tabs-md-tab-color:                    rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default;

/// @prop - Padding of the active tab button
$tabs-md-tab-padding-active:           6px 0 10px 0 !default;

/// @prop - Font size of the active tab button text
$tabs-md-tab-font-size-active:         1.4rem !default;

/// @prop - Text color of the active tab button
$tabs-md-tab-color-active:             $toolbar-md-active-color !default;

/// @prop - Margin on the tab button text
$tabs-md-tab-text-margin:              6px 0 !default;

/// @prop - Capitalization of the tab button text
$tabs-md-tab-text-capitalization:      none !default;

/// @prop - Transform for the tab button text
$tabs-md-tab-text-transform:           scale($tabs-md-tab-font-size / $tabs-md-tab-font-size-active) !default;

/// @prop - Transform origin for the tab button text
$tabs-md-tab-text-transform-origin:    bottom center !default;

/// @prop - Margin on the active tab button text
$tabs-md-tab-text-margin-active:       7px 0 !default;

/// @prop - Transform for the active tab button text
$tabs-md-tab-text-transform-active:    scale(1) !default;

/// @prop - Text transition for the tab button text
$tabs-md-tab-text-transition:          transform 200ms ease-in-out !default;

/// @prop - Size of the tab button icon
$tabs-md-tab-icon-size:                2.4rem !default;


.tabs-md .tabbar {
  background: $tabs-md-background;
}

.tabs-md .tab-button {
  padding: $tabs-md-tab-padding;

  min-height: $tabs-md-tab-min-height;

  font-size: $tabs-md-tab-font-size-active;
  font-weight: $tabs-md-tab-font-weight;
  color: $tabs-md-tab-color;
}

.tabs-md .tab-button[aria-selected=true] {
  padding: $tabs-md-tab-padding-active;

  color: $tabs-md-tab-color-active;
}

.tabs-md .tab-button-text {
  margin: $tabs-md-tab-text-margin;

  text-transform: $tabs-md-tab-text-capitalization;
  transform: $tabs-md-tab-text-transform;
  transform-origin: $tabs-md-tab-text-transform-origin;

  transition: $tabs-md-tab-text-transition;
}

.tabs-md .tab-button[aria-selected=true] .tab-button-text {
  margin: $tabs-md-tab-text-margin-active;

  transform: $tabs-md-tab-text-transform-active;
}

.tabs-md .tab-button-icon {
  min-width: $tabs-md-tab-icon-size + 5;

  font-size: $tabs-md-tab-icon-size;
}

.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
  margin-bottom: 0;
}

.tabs-md[tabsLayout=icon-bottom] .tab-button {
  padding-top: 8px;
  padding-bottom: 8px;
}

.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
  margin-top: 0;
}

.tabs-md[tabsLayout=icon-right] .tab-button,
.tabs-md[tabsLayout=icon-left] .tab-button {
  padding-bottom: 10px;
}

.tabs-md[tabsLayout=icon-right] .tab-button ion-icon,
.tabs-md[tabsLayout=icon-left] .tab-button ion-icon {
  min-width: 24px;
}

.tabs-md[tabsLayout=icon-hide] .tab-button,
.tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only {
  padding: 6px 10px;
}


// Material Design Tab Highlight
// --------------------------------------------------

.tabs-md[tabsHighlight=true] .tab-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;

  width: 1px;
  height: 2px;

  background: $tabs-md-tab-color-active;
  transform: translateZ(0);
  transform-origin: 0 0;
}

.tabs-md[tabsHighlight=true] .tab-highlight.animate {
  transition-duration: 300ms;
}

.tabs-md[tabsHighlight=true][tabsPlacement=bottom] .tab-highlight {
  top: 0;
}


// Material Design Tabs Color Mixin
// --------------------------------------------------

@mixin tabbar-md($color-name, $color-base, $color-contrast) {

  .tabs-md-#{$color-name} .tabbar {
    background-color: $color-base;
  }

  .tabs-md-#{$color-name} .tabbar .tab-button {
    color: rgba($color-contrast, $tabs-md-tab-opacity);
  }

  .tabs-md-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover),
  .tabs-md-#{$color-name} .tabbar .tab-button[aria-selected=true] {
    color: $color-contrast;
  }

  .tabs-md-#{$color-name} .tabbar .tab-highlight {
    background: $color-contrast;
  }

}


// Material Design Tabbar Color Generation
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
  @include tabbar-md($color-name, $color-base, $color-contrast);
}
